<template>
  <div class="progress-page">
    <h1 class="page-title">
      <el-icon><DataLine /></el-icon>
      学习进度
    </h1>
    
    <!-- 总体进度统计 -->
    <el-row :gutter="20" class="mb-20">
      <el-col :xs="24" :sm="8">
        <el-card class="stat-card">
          <div class="stat-content">
            <el-icon class="stat-icon"><Calendar /></el-icon>
            <div>
              <div class="stat-number">{{ overallProgress.currentDay }}/54</div>
              <div class="stat-label">学习天数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="8">
        <el-card class="stat-card">
          <div class="stat-content">
            <el-icon class="stat-icon"><Trophy /></el-icon>
            <div>
              <div class="stat-number">{{ overallProgress.completedStages }}/4</div>
              <div class="stat-label">完成阶段</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="8">
        <el-card class="stat-card">
          <div class="stat-content">
            <el-icon class="stat-icon"><CircleCheck /></el-icon>
            <div>
              <div class="stat-number">{{ overallProgress.totalProgress }}%</div>
              <div class="stat-label">总体进度</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 学习阶段进度 -->
    <el-card class="mb-20">
      <template #header>
        <div class="card-header">
          <el-icon><Aim /></el-icon>
          <span>学习阶段进度</span>
        </div>
      </template>
      
      <div class="stages-progress">
        <div v-for="stage in learningStages" :key="stage.id" class="stage-item">
          <div class="stage-header">
            <div class="stage-info">
              <h3>{{ stage.name }}</h3>
              <p>{{ stage.description }}</p>
              <div class="stage-meta">
                <el-tag :type="stage.status === 'completed' ? 'success' : stage.status === 'current' ? 'primary' : 'info'">
                  {{ getStatusText(stage.status) }}
                </el-tag>
                <span class="stage-duration">{{ stage.duration }}</span>
              </div>
            </div>
            <div class="stage-progress">
              <el-progress 
                type="circle" 
                :percentage="stage.progress" 
                :width="80"
                :color="stage.color"
              />
            </div>
          </div>
          
          <!-- 阶段详细任务 -->
          <el-collapse v-model="activeStages" class="stage-details">
            <el-collapse-item :name="stage.id" :title="`查看详细任务 (${stage.tasks.length}个)`">
              <div class="tasks-list">
                <div v-for="task in stage.tasks" :key="task.day" class="task-item">
                  <div class="task-day">第{{ task.day }}天</div>
                  <div class="task-content">
                    <h4>{{ task.title }}</h4>
                    <p>{{ task.description }}</p>
                    <div class="task-homework" v-if="task.homework">
                      <strong>课后作业：</strong>{{ task.homework }}
                    </div>
                  </div>
                  <div class="task-status">
                    <el-checkbox 
                      v-model="task.completed" 
                      @change="updateTaskProgress(stage.id, task.day)"
                      :disabled="task.day > overallProgress.currentDay"
                    >
                      {{ task.completed ? '已完成' : '未完成' }}
                    </el-checkbox>
                  </div>
                </div>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>
    </el-card>

    <!-- 学习建议 -->
    <el-card>
      <template #header>
        <div class="card-header">
          <el-icon><Compass /></el-icon>
          <span>学习建议</span>
        </div>
      </template>
      
      <div class="learning-suggestions">
        <el-alert
          v-for="suggestion in getCurrentSuggestions()"
          :key="suggestion.type"
          :title="suggestion.title"
          :description="suggestion.content"
          :type="suggestion.type"
          show-icon
          :closable="false"
          class="mb-10"
        />
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

// 总体进度数据
const overallProgress = ref({
  currentDay: 3,
  completedStages: 0,
  totalProgress: 5
})

// 当前展开的阶段
const activeStages = ref(['1'])

// 学习阶段数据
const learningStages = ref([
  {
    id: '1',
    name: 'Web 技术基础',
    description: 'HTML/CSS/JavaScript 基础知识',
    duration: '第1-14天',
    progress: 20,
    color: '#409eff',
    status: 'current', // current, completed, pending
    tasks: [
      {
        day: 1,
        title: 'HTML 入门：标签、结构、常用元素',
        description: '学习HTML基本标签，了解网页结构',
        homework: '创建一个简单的个人介绍页面',
        completed: true
      },
      {
        day: 2,
        title: 'HTML 表单与输入控件',
        description: '掌握各种表单元素的使用方法',
        homework: '制作一个注册表单',
        completed: true
      },
      {
        day: 3,
        title: 'CSS 基础：选择器、颜色、字体、背景',
        description: '学习CSS基础样式设置',
        homework: '给之前的页面添加样式',
        completed: false
      },
      {
        day: 4,
        title: 'CSS 盒模型、布局方式（flex/grid）',
        description: '理解CSS盒模型和现代布局方式',
        homework: '使用 flex 布局制作响应式导航栏',
        completed: false
      },
      {
        day: 5,
        title: 'JavaScript 基础语法：变量、函数、条件语句',
        description: '掌握JavaScript基本语法',
        homework: '写一个计算BMI的脚本',
        completed: false
      }
    ]
  },
  {
    id: '2',
    name: 'C# 编程基础',
    description: 'C# 语法和面向对象编程',
    duration: '第15-28天',
    progress: 0,
    color: '#67c23a',
    status: 'pending',
    tasks: [
      {
        day: 15,
        title: 'C# 开发环境搭建',
        description: '安装Visual Studio或VS Code + .NET SDK',
        homework: '输出 "Hello World"',
        completed: false
      },
      {
        day: 16,
        title: '变量、数据类型、运算符',
        description: '学习C#基本数据类型和运算',
        homework: '计算两个数的加减乘除',
        completed: false
      }
    ]
  },
  {
    id: '3',
    name: 'Vue.js 框架',
    description: '现代前端开发框架',
    duration: '第29-38天',
    progress: 0,
    color: '#e6a23c',
    status: 'pending',
    tasks: [
      {
        day: 29,
        title: 'Vue.js 简介、创建第一个 Vue 应用',
        description: '了解Vue.js框架特点',
        homework: '显示动态欢迎语',
        completed: false
      }
    ]
  },
  {
    id: '4',
    name: '浏览器自动化',
    description: 'C# + CEF3 实现浏览器自动化',
    duration: '第39-54天',
    progress: 0,
    color: '#f56c6c',
    status: 'pending',
    tasks: [
      {
        day: 39,
        title: '浏览器自动化简介、Selenium WebDriver 概述',
        description: '了解浏览器自动化技术',
        homework: '安装 Selenium NuGet 包',
        completed: false
      }
    ]
  }
])

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    current: '进行中',
    completed: '已完成',
    pending: '待开始'
  }
  return statusMap[status] || '未知'
}

// 更新任务进度
const updateTaskProgress = (stageId, day) => {
  ElMessage.success(`第${day}天任务状态已更新`)
  
  // 重新计算阶段进度
  updateStageProgress()
  
  // 保存到本地存储
  saveProgress()
}

// 更新阶段进度
const updateStageProgress = () => {
  learningStages.value.forEach(stage => {
    const completedTasks = stage.tasks.filter(task => task.completed).length
    stage.progress = Math.round((completedTasks / stage.tasks.length) * 100)
    
    // 更新状态
    if (stage.progress === 100) {
      stage.status = 'completed'
    } else if (stage.progress > 0) {
      stage.status = 'current'
    } else {
      stage.status = 'pending'
    }
  })
  
  // 更新总体进度
  const completedStages = learningStages.value.filter(stage => stage.status === 'completed').length
  overallProgress.value.completedStages = completedStages
  
  const totalTasks = learningStages.value.reduce((sum, stage) => sum + stage.tasks.length, 0)
  const completedTasks = learningStages.value.reduce((sum, stage) => 
    sum + stage.tasks.filter(task => task.completed).length, 0)
  
  overallProgress.value.totalProgress = Math.round((completedTasks / totalTasks) * 100)
}

// 获取当前学习建议
const getCurrentSuggestions = () => {
  const suggestions = []
  
  const currentStage = learningStages.value.find(stage => stage.status === 'current')
  
  if (currentStage) {
    suggestions.push({
      type: 'info',
      title: '当前阶段',
      content: `你正在学习「${currentStage.name}」，建议每天花费2-3小时完成学习任务。`
    })
  }
  
  if (overallProgress.value.currentDay <= 14) {
    suggestions.push({
      type: 'warning',
      title: '学习提醒',
      content: '前端基础很重要，建议多动手实践，每个示例都要亲自编写代码。'
    })
  }
  
  suggestions.push({
    type: 'success',
    title: '学习建议',
    content: '遇到问题时多查阅官方文档和技术社区，养成良好的学习习惯。'
  })
  
  return suggestions
}

// 保存进度到本地存储
const saveProgress = () => {
  localStorage.setItem('learningProgress', JSON.stringify({
    overallProgress: overallProgress.value,
    learningStages: learningStages.value
  }))
}

// 从本地存储加载进度
const loadProgress = () => {
  const saved = localStorage.getItem('learningProgress')
  if (saved) {
    const data = JSON.parse(saved)
    overallProgress.value = data.overallProgress
    learningStages.value = data.learningStages
  }
}

// 组件挂载时加载数据
onMounted(() => {
  loadProgress()
  updateStageProgress()
})
</script>

<style scoped>
.progress-page {
  padding: 0;
}

/* 通用样式类 */
.mb-10 {
  margin-bottom: 10px;
}

.mb-20 {
  margin-bottom: 20px;
}

.page-title {
  display: flex;
  align-items: center;
  font-size: 24px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 24px;
}

.page-title .el-icon {
  margin-right: 12px;
  color: #409eff;
  font-size: 28px;
}

.stat-card {
  height: 120px;
  cursor: pointer;
  transition: all 0.3s;
  border-radius: 12px;
  overflow: hidden;
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.stat-content {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 20px;
  text-align: center;
}

.stat-icon {
  font-size: 32px;
  color: #409eff;
  margin-right: 15px;
  flex-shrink: 0;
}

.stat-number {
  font-size: 28px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 6px;
  line-height: 1;
}

.stat-label {
  font-size: 14px;
  color: #909399;
  font-weight: 500;
}

.card-header {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 500;
}

.card-header .el-icon {
  margin-right: 8px;
  color: #409eff;
}

.stages-progress {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.stage-item {
  border: 1px solid #ebeef5;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.stage-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background: #f8f9fa;
  border-bottom: 1px solid #ebeef5;
}

.stage-info h3 {
  margin: 0 0 8px 0;
  color: #303133;
  font-size: 18px;
  font-weight: 600;
}

.stage-info p {
  margin: 0 0 12px 0;
  color: #606266;
  font-size: 14px;
  line-height: 1.5;
}

.stage-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.stage-duration {
  font-size: 12px;
  color: #909399;
  background: #f0f0f0;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
}

.stage-details {
  border-top: none;
}

.stage-details :deep(.el-collapse-item__header) {
  background: #fafafa;
  padding: 12px 20px;
  border-bottom: 1px solid #ebeef5;
}

.stage-details :deep(.el-collapse-item__content) {
  padding: 0;
}

.tasks-list {
  padding: 0;
}

.task-item {
  display: flex;
  align-items: flex-start;
  padding: 16px 20px;
  border-bottom: 1px solid #f5f7fa;
  gap: 16px;
  transition: background-color 0.3s;
}

.task-item:hover {
  background-color: #fafbfc;
}

.task-item:last-child {
  border-bottom: none;
}

.task-day {
  flex-shrink: 0;
  min-width: 60px;
  font-size: 12px;
  background: #409eff;
  color: white;
  text-align: center;
  padding: 6px 8px;
  border-radius: 12px;
  font-weight: 500;
}

.task-content {
  flex: 1;
  min-width: 0;
}

.task-content h4 {
  margin: 0 0 8px 0;
  font-size: 14px;
  color: #303133;
  font-weight: 500;
  line-height: 1.4;
}

.task-content p {
  margin: 0 0 8px 0;
  font-size: 13px;
  color: #606266;
  line-height: 1.5;
}

.task-homework {
  font-size: 12px;
  color: #e6a23c;
  background: #fdf6ec;
  padding: 6px 8px;
  border-radius: 4px;
  border-left: 3px solid #e6a23c;
  margin-top: 8px;
}

.task-status {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.learning-suggestions .el-alert {
  margin-bottom: 12px;
}

.learning-suggestions .el-alert:last-child {
  margin-bottom: 0;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .stat-content {
    padding: 15px;
  }
  
  .stat-icon {
    font-size: 28px;
    margin-right: 12px;
  }
  
  .stat-number {
    font-size: 24px;
  }
}

@media (max-width: 768px) {
  .page-title {
    font-size: 20px;
    margin-bottom: 20px;
  }
  
  .page-title .el-icon {
    font-size: 24px;
  }
  
  .stat-card {
    height: 100px;
    margin-bottom: 12px;
  }
  
  .stat-content {
    padding: 12px;
    flex-direction: column;
    text-align: center;
  }
  
  .stat-icon {
    margin-right: 0;
    margin-bottom: 8px;
    font-size: 24px;
  }
  
  .stat-number {
    font-size: 20px;
  }
  
  .stage-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 16px;
  }
  
  .stage-info {
    width: 100%;
  }
  
  .stage-progress {
    align-self: center;
  }
  
  .task-item {
    flex-direction: column;
    gap: 12px;
    padding: 16px;
  }
  
  .task-day {
    align-self: flex-start;
    min-width: auto;
    width: auto;
  }
  
  .task-content {
    width: 100%;
  }
  
  .stage-meta {
    gap: 8px;
  }
}

@media (max-width: 480px) {
  .progress-page {
    padding: 0 10px;
  }
  
  .stat-card {
    height: 90px;
  }
  
  .stat-content {
    padding: 10px;
  }
  
  .stat-number {
    font-size: 18px;
  }
  
  .stat-label {
    font-size: 12px;
  }
  
  .stage-header {
    padding: 12px;
  }
  
  .stage-info h3 {
    font-size: 16px;
  }
  
  .task-item {
    padding: 12px;
  }
}
</style> 